import React, { Component } from 'react'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
import Homes from './home/Homes'
import Money from './home/Money'
import Publicpraise from './home/Publicpraise'
import My from './home/My'
import Mes from './home/Mes'
export default class HOME extends Component {
  state = {
    footerList: [
      {
        title: "支付宝",
        path: "/home/homes",
        com: Homes,
        children:[
          {
            path: "/home/homes/h",
            com: () => {
              <p>sss</p>
            }
          },
        ]
      },
      {
        title: "理财",
        path: "/home/money",
        com: Money
      },
      {
        title: "口碑",
        path: "/home/publicpraise",
        com: Publicpraise
      },
      {
        title: "消息",
        path: "/home/mes",
        com: Mes
      },
      {
        title: "我的",
        path: "/home/my",
        com: My
      }
    ]
  }
  render() {
    
    const { footerList } = this.state
    return (
      <div className="home h100">
        <header></header>
        <main>
          <Switch>
            {
              footerList.map((item, index) => {
                return <Route key={index} path={item.path} component={item.com} />
              })
            }
             {/* {
                   footerList.map((item, index) => {
                       return <Route path = { item.path } render = {(prop) => {
                           //    prop  路由信息
                           let Com = item.com
                           //  如果当前路由下有children才传递
                           if (item.children) {
                               return <Com children = { item.children }/>
                           } else {
                               return <Com/>
                           } 
                           
                       }} key = { index }/>
                   })
                } */}
            <Redirect to="home/homes" />
          </Switch>
        </main>
        <footer>
          {
            footerList.map((item, index) => {
              return <NavLink key={index} to={item.path} > {item.title} </NavLink>
            })
          }
        </footer>
      </div>
    )
  }
}


